<template>
  <div class="no-data">
    <div class="no-data-content" :class="type">
      <img class="no-data-content-image" :src="getUrl" />
      <p class="no-data-tip">{{ getText }}</p>
    </div>
  </div>
</template>
<script setup>
import video from './images/video_bg.png'
import image from './images/image_bg.png'
import data from './images/data_bg.png'
import imageErr from './images/imageErr.png'
import videoErr from './images/videoErr.png'
import { computed, ref } from 'vue'
const props = defineProps({
  type: {
    type: String,
    default: 'data'
  },
  url: {
    type: String,
    default: ''
  },
  text: {
    type: String,
    default: ''
  }
})
const defaultUrlConfig = ref({
  video: video,
  image: image,
  data: data,
  imageErr: imageErr,
  videoErr: videoErr
})
let defaultText = {
  video: '暂无视频',
  image: '暂无图片',
  data: '暂无数据',
  imageErr: '图片加载失败',
  videoErr: '视频加载失败'
}
const getUrl = computed(() => {
  const type = props.type
  let url = ''
  url = props.url || defaultUrlConfig.value[type]
  return url
})
const getText = computed(() => {
  const type = props.type
  let text = ''
  text = props.text || defaultText[type]
  return text
})
</script>
<style scoped>
.no-data {
  width: 100%;
  min-height: 110px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  position: absolute;
  font-size: 18px;
  top: calc(50% - 10px);
  left: 50%;
  transform: translate(-50%, -50%);
}
.imageErr,
.videoErr {
  height: 46px !important;
  width: auto;
  position: relative;
}
.no-data-content {
  height: 110px;
  width: auto;
  position: relative;
}

.no-data-content-image {
  height: 100%;
  width: auto;
}
.no-data-tip {
  margin-top: 8px;
  font-size: 14px;
  text-align: center;
  color: var(--text-secondary, #ccc);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
</style>
